import React, { useEffect, useState, useRef } from "react";
import Taro, { useDidShow } from "@tarojs/taro";
import { View, Text, Input, Form, Canvas } from "@tarojs/components";
import { setData, getData } from "@/src/globalData";
import FooterBtn from "@/components/FooterBtn";

import "./index.scss";

const Index: React.FC<{}> = () => {
  const [isDrawing, setIsDrawing] = useState(false);
  // let context = useRef<any>(null);
  let startX = useRef<any>(null);
  let startY = useRef<any>(null);

  useEffect(() => {
    var context = Taro.createCanvasContext("firstCanvas");

    context.setStrokeStyle("#00ff00");
    context.setLineWidth(5);
    context.rect(0, 0, 200, 200);
    context.stroke();
    context.setStrokeStyle("#ff0000");
    context.setLineWidth(2);
    context.moveTo(160, 100);
    context.arc(100, 100, 60, 0, 2 * Math.PI, true);
    context.moveTo(140, 100);
    context.arc(100, 100, 40, 0, Math.PI, false);
    context.moveTo(85, 80);
    context.arc(80, 80, 5, 0, 2 * Math.PI, true);
    context.moveTo(125, 80);
    context.arc(120, 80, 5, 0, 2 * Math.PI, true);
    context.stroke();
    context.draw();
  }, []);

  const touchStart = (e) => {
    // 获取触摸点坐标
    startX.current = e.changedTouches[0].x;
    startY.current = e.changedTouches[0].y;

    // 画笔配置
    context.current.setStrokeStyle("red"); // 颜色
    context.current.setLineWidth(5); // 粗细
    context.current.setLineCap("round"); // 线头形状
    context.current.setLineJoin("round"); // 交叉处形状
  };

  const touchMove = (e) => {
    console.log("startX-------->>", startX);
    console.log("startY-------->>", startY);
    console.log("context-------->>", context);
    // 移动时坐标
    var moveX = e.changedTouches[0].x;
    var moveY = e.changedTouches[0].y;

    context.current.moveTo(startX.current, startY.current); // 找到起点
    context.current.lineTo(moveX, moveY); // 找到终点
    context.current.stroke();

    // 改变起点坐标
    startX.current = moveX;
    startY.current = moveY;
    context.current.draw(true); // 画
  };

  return (
    <Canvas
      type="aaa"
      style="width: 300px; height: 200px;"
      canvasId="firstCanvas"
    />
  );
};

export default Index;
